<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API调试测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      .test-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      .result {
        background: #f5f5f5;
        padding: 10px;
        margin: 10px 0;
        border-radius: 3px;
      }
      .error {
        background: #ffebee;
        color: #c62828;
      }
      .success {
        background: #e8f5e8;
        color: #2e7d32;
      }
      button {
        padding: 8px 16px;
        margin: 5px;
        background: #1976d2;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
      button:hover {
        background: #1565c0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>API调试测试页面</h1>

      <div class="test-section">
        <h3>测试反射接口</h3>
        <button onclick="testReflectionAPI()">测试获取模型参数</button>
        <div id="reflection-result" class="result"></div>
      </div>

      <div class="test-section">
        <h3>测试数据库接口</h3>
        <button onclick="testDatabaseAPI()">测试数据库参数接口</button>
        <div id="database-result" class="result"></div>
      </div>

      <div class="test-section">
        <h3>网络状态</h3>
        <button onclick="checkNetworkStatus()">检查网络连接</button>
        <div id="network-result" class="result"></div>
      </div>
    </div>

    <script>
      const modelId = 1955074328072564700;
      const baseURL = '/';

      async function testReflectionAPI() {
        // 功能：调用同源后端反射接口，验证模型参数反射返回
        const resultDiv = document.getElementById('reflection-result');
        resultDiv.innerHTML = '正在测试反射接口...';

        try {
          const response = await fetch(`${baseURL}/api/valuation/models/${modelId}/parameters/reflection`);
          const data = await response.json();

          if (response.ok) {
            resultDiv.className = 'result success';
            resultDiv.innerHTML = `
                        <h4>反射接口测试成功</h4>
                        <p>状态码: ${response.status}</p>
                        <p>返回数据: ${JSON.stringify(data, null, 2)}</p>
                        <p>参数数量: ${data.data ? data.data.length : 0}</p>
                    `;
          } else {
            resultDiv.className = 'result error';
            resultDiv.innerHTML = `
                        <h4>反射接口测试失败</h4>
                        <p>状态码: ${response.status}</p>
                        <p>错误信息: ${JSON.stringify(data, null, 2)}</p>
                    `;
          }
        } catch (error) {
          resultDiv.className = 'result error';
          resultDiv.innerHTML = `
                    <h4>反射接口请求异常</h4>
                    <p>错误: ${error.message}</p>
                `;
        }
      }

      async function testDatabaseAPI() {
        // 功能：调用同源后端数据库接口，验证参数查询返回
        const resultDiv = document.getElementById('database-result');
        resultDiv.innerHTML = '正在测试数据库接口...';

        try {
          const response = await fetch(`${baseURL}/api/valuation/parameters/model/${modelId}`);
          const data = await response.json();

          if (response.ok) {
            resultDiv.className = 'result success';
            resultDiv.innerHTML = `
                        <h4>数据库接口测试成功</h4>
                        <p>状态码: ${response.status}</p>
                        <p>返回数据: ${JSON.stringify(data, null, 2)}</p>
                        <p>参数数量: ${data.data ? data.data.length : 0}</p>
                    `;
          } else {
            resultDiv.className = 'result error';
            resultDiv.innerHTML = `
                        <h4>数据库接口测试失败</h4>
                        <p>状态码: ${response.status}</p>
                        <p>错误信息: ${JSON.stringify(data, null, 2)}</p>
                    `;
          }
        } catch (error) {
          resultDiv.className = 'result error';
          resultDiv.innerHTML = `
                    <h4>数据库接口请求异常</h4>
                    <p>错误: ${error.message}</p>
                `;
        }
      }

      async function checkNetworkStatus() {
        // 功能：检查同源后端网络状态，验证服务是否可访问
        const resultDiv = document.getElementById('network-result');
        resultDiv.innerHTML = '正在检查网络状态...';

        try {
          const response = await fetch(`${baseURL}/api/valuation/models/types`);
          const data = await response.json();

          if (response.ok) {
            resultDiv.className = 'result success';
            resultDiv.innerHTML = `
                        <h4>网络连接正常</h4>
                        <p>后端服务可访问</p>
                        <p>状态码: ${response.status}</p>
                    `;
          } else {
            resultDiv.className = 'result error';
            resultDiv.innerHTML = `
                        <h4>网络连接异常</h4>
                        <p>状态码: ${response.status}</p>
                    `;
          }
        } catch (error) {
          resultDiv.className = 'result error';
          resultDiv.innerHTML = `
                    <h4>网络连接失败</h4>
                    <p>错误: ${error.message}</p>
                    <p>请检查后端服务是否启动</p>
                `;
        }
      }

      // 页面加载时自动检查网络状态
      window.onload = function () {
        checkNetworkStatus();
      };
    </script>
  </body>
</html>
